<template>
  <ee-space :class="_class" :compact="type == 'button'">
    <slot :i="this"></slot>
    <template v-if="options">
      <button v-for="item, index in options" :key="index" :disabled="_isDisabled(item) || $attrs['disabled']"
              :class="(type == 'button') ? { 'ee-button': 1, 'eec-primary-label-border': isSelect(item) } : {}"
              :active="isSelect(item) ? '' : undefined" @click.prevent.stop="$emit('click', item); _select(item)">
        <template v-if="type == 'button'">
          <slot name="checked" :checked="isSelect(item)">{{ item.label }}</slot>
        </template>
        <template v-else>
          <i class="checked">
            <template v-if="isSelect(item)">
              <ee-shape on shape="tick" v-if="type == 'tick'" />
              <i v-else class="selected"></i>
            </template>
            <template v-else></template>
          </i>
          {{ item.label }}
        </template>
      </button>
    </template><template v-else />
    <input v-if="name" type="hidden" :name="name" :value="modelValue" /><template v-else />
  </ee-space>
</template>

<script type="text/javascript">
import { optionsSimpleMixin, optionRadio, formMixin } from './index'
/** 单选项
 * 
 * 插槽
 * @property {{checked:boolean}} checked - 左侧是否选中的样式
 * @property {{checked:boolean, value:any}} default - 文本样式
 * 
 * 用法
 * - 文本靠左 <ee-radio style="flex-direction:row-reverse">
 */
export default {
  name: "ee-radio",
  mixins: [formMixin, optionsSimpleMixin, optionRadio],
  props: {
    /** 单选的样式类型
     * -default - 圆圈，选中时中心也是个圆圈
     * -tick - 圆圈，选中时中心是打勾
     * -button - 普通按钮，选中时按钮type=primary
     *
     * 更多其它自定义样式，可以通过插槽定制
     * @example
     * <ee-radio>
     *  <template #checked="{checked}"><!-- 这里是左侧选中项 --></template>
     *  <template #default="{i}">
     *    <ee-button color="error" :plain="i.checked == 选项值">{{ 选项文本 }}</ee-button>
     *  </template>
     * </ee-radio>
     */
    type: {
      type: String,
      /** @type {('default' | 'tick' | 'button')} */
      default: 'tick',
    },
    /** 选项带边框 */
    border: Boolean,
  },
  computed: {
    _class() {
      const _c = { 'ee-radio': 1 };
      _c[this.$options.name] = 1;
      return _c;
    }
  }
}
</script>

<style lang="scss">
// 方框打勾 --ee-radio-border-radius: .1em;

.ee-radio {
  align-items: center;

  > * {
    cursor: pointer;
    user-select: none;
    vertical-align: top;
    display: inline-flex;
    align-items: center;
    font-size: 1em;

    .checked {
      width: 1em;
      height: 1em;
      border: 1px solid var(--line0);
      background-color: var(--ee-bgcolor);
      border-radius: var(--ee-radio-border-radius);
      position: relative;
      margin-right: .25em;
      display: flex;
      align-items: center;
      justify-content: center;

      > .ee-shape {
        color: var(--ee-bgcolor);
        font-size: .75em;
      }
    }

    &:hover,
    &:focus {
      .checked {
        border-color: var(--ee-radio-bgcolor);
      }
    }

    &[active] {
      .checked {
        background-color: var(--ee-radio-bgcolor);

        .selected {
          background-color: var(--ee-bgcolor);
          width: .5em;
          height: .5em;
          // border-radius: var(--ee-radio-border-radius);
          border-radius: 50%;
        }
      }
    }
  }

  > button {
    background-color: transparent;
    border: none;
  }
}
</style>